<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        @click="submitUpload"
        >上传到服务器</el-button
      >
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>

    <!-- <el-button @click="interpretFile">获取文件</el-button> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      workbook: null,
      worksheet: null,
      rows: [],
      hideList:{
        row:[],
        column:[]
      }
    };
  },
  methods: {
    submitUpload() {
      // this.$refs.upload.submit();
      console.log("查看fileList", this.fileList);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
      this.readFile(file.raw);
    },
    async readFile(file) {
      const Excel = require("exceljs");
      console.log("开始解读文件",file)
      const reader = new FileReader(file);
      reader.onload = async (e) => {
        const data = new Uint8Array(e.target.result);
        this.workbook = new Excel.Workbook();
        await this.workbook.xlsx.load(data);
        this.worksheet = this.workbook.worksheets[0];
        this.readSheetData();
      };
      reader.readAsArrayBuffer(file);
    },
    readSheetData() {
      this.rows = [];
      this.worksheet.eachRow((row, rowNumber) => {

        // console.log("查看行内容-----",row,rowNumber)
        if (row.hidden) {
          this.hideList.row.push(row._number)
        }

        const rowData = [];
        row.eachCell((cell, colNumber) => {
          
          const columnIndex = cell._column.number;
          const isHidden = this.worksheet.getColumn(columnIndex).hidden;
          if(isHidden){
            this.hideList.column.push(this.worksheet.getColumn(columnIndex).number)
          }
          // console.log("查看单元格所在列隐藏-----",cell,columnIndex,this.worksheet.getColumn(columnIndex))
          const cellValue = cell.value;
          const cellStyle = cell.style;
          rowData.push({ value: cellValue, style: cellStyle });
        });
        this.rows.push(rowData);
      });

      console.log("查看处理完成数据",this.rows)
      this.hideList.column=[...new Set(this.hideList.column)]
      console.log("查看处理完成检索出来的行列数据",this.hideList)
    },

    // 文件上传之前
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (testmsg) {
        testmsg = testmsg.toLowerCase();
      }
      let extension = testmsg === "xlsx";
      if (!extension) {
        this.$message.error("支持拓展名xlsx");
      }

      let maxFileSize = file.size / 1024 / 1024 < 20;
      if (!maxFileSize) {
        this.$message.error("上传文件不得大于20M");
      }
      return extension && maxFileSize;
    },
  },
};
</script>